<template>
  <el-container>
    <el-header>
      <div style="display:flex; justify-content: flex-start;">
        <img alt="" style="width: 70px; height: 70px; margin-right: 30px" src="../assets/supermarket.png">
        <div style="color: #de0100;font-size:28px;font-weight: bold">超市管理系统</div>
      </div>
      <div>
        <el-tooltip content="首页" placement="bottom" effect="light">
          <img src="../assets/loginHome.png" alt="" style="width: 30px;height: 30px;margin-right: 30px" @click="toHome">
        </el-tooltip>
        <el-tooltip content="登录" placement="bottom" effect="light" >
          <img src="../assets/login.png" alt="" style="width: 30px;height:30px;margin-right: 100px;margin-top:30px" @click="toLogin">
        </el-tooltip>
      </div>
    </el-header>
    <el-main>
      <img alt="" style="width: 200px; height: 200px; margin-right: 150px" src="../assets/gouwu.png">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      activeName: '1',
      loginForm: {
        mgName: '',
        mgPwd: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        mgName: [
          {required: true, message: '请输入登录名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur'}
        ],
        // 验证密码是否合法
        mgPwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    resetLoginForm () {
      // 点击重置按钮，重置表单
      this.$refs.loginFormRef.resetFields()
    },
    toHome () {
      this.isCollapse = true
      this.$router.push('/header')
    },
    login () {
      this.$refs.loginFormRef.validate(valid => {
        if (!valid) return
        this.$axios
          .post('login', this.loginForm)
          .then(resp => {
            console.log(resp)
            console.log(resp.data.desc)
            if (resp.data.status !== 200) return this.$message.error('登录失败')
            this.$message.success('登录成功')
            this.$router.push({path: '/header'})
          })
          .catch(() => {
          })
      })
    },
    toLogin () {
      this.$router.push('/login')
    }
  }
}
</script>
<style  lang="less" scoped>
.login_box{
  margin-top: 40px;
  margin-bottom: 40px;
  width:300px;
  height:350px;
  background-color:#fff;
  border-radius: 3px;
  margin-right:250px;
}
.title{
  display:flex;
  width:100%;
  justify-content: flex-start;
  align-items: center;
  margin-top:30px;
  margin-left:60px
}
.el-main {
  margin-top: 30px;
  background-color: #dd2726;
  height: 500px;
  //line-height: 500px;
  display:flex;
  //width:100%;
  justify-content: flex-end;
  align-items: center;
}
.centerDiv{
  background-color: #de0100;
}
.el-header{
  display:flex;
  width:100%;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  line-height: 60px;
  margin-top:20px;
  margin-left:60px
}
</style>
